<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js"></script>
</head>
<script type="text/javascript">
	$(function(){
		//当键盘弹起的时候失去焦点
		$("#tid").keyup(function(){
			//获取值
			var $value=$(this).val();
			
			//当值不为空的时候发送ajax
			if($value!=null && $value!=''){
				//清空div
				$("#did").html("");     //每次使用之前都要清空一下
				
				//用post方法
				$.post("/ajax/searchkw","kw="+$value,function(d){
					if(d!=''){
						var arr=d.split(",");     //split是把字符串改成数组
						$(arr).each(function(){    //$(arr)是将数组变成jquery对象
							//alert(this);
						//将每一个值放入到div中，将其插入到id为did的div中
						$("#did").append("<div>"+this+"</div>");
						});   
						//将div展示
						$("#did").show();
					}
				});
			}else{
				//将div隐藏
				$("#did").hide();
			}
		});
	})
</script>
<body>
<center>
	<h1>黑马搜索</h1>
	<div> 
		<input name="kw" id="tid"/><input type="submit" value="黑马一下"/>
	</div>
	<div id="did" style="border: 1px solid red;width:181px;position: relative;
    left: -38px; display:none "></div>
</center>
</body>
</html>